<template>
	<view class="home">
		<view class="navigationBar">
			<view class="department">
				<view class="name" @tap="goto('/pages/companyToggle/index')">{{departName}}</view>
				<image src="/static/images/home/company_vip.png" class="vip" v-if="authState === '已认证'"></image>
				<view class="auth" v-else-if="authState === '未认证'" @tap="getCertifyStatus">
					去认证
					<image src="/static/images/home/right.png" class="right"></image>
				</view>
				<view class="auth" v-else-if="authState === '认证中'" @tap="getCertifyStatus">
					认证中
					<image src="/static/images/home/right.png" class="right"></image>
				</view>
				<view class="auth" v-else>
					{{authState}}
				</view>
			</view>
			<view class="userinfo" @tap="peopleCertifyClick">
				<!-- goto('/pages/personalCenter/index') -->
				<image class="user_icon" src="/static/images/home/user_icon.png"></image>
				<!-- 个人认证的v -->
				<image class="user_vip" v-if="balance.userCertification === 1" src="/static/images/home/user_vip.png"></image>
				<image class="user_vip" v-else-if="balance.userCertification === 0" src="/static/images/home/unAuth.png"></image>
				<view class="info">
					<view class="basic">{{userName}} {{userPhone}}</view>
					<view class="roles">{{roleName}}</view>
				</view>
				<image src="/static/images/home/edit.png" class="edit" @tap.stop="userClick"></image>
			</view>
		</view>
		<view class="head">
			<view class="capital" v-if="modules.fund">
				<view class="item" @tap="goto('/pages/fundDetail/index')">
					<view class="title">
						<image class="icon" src="/static/images/home/fund.png"></image>
						资金账户
					</view>
					<view class="available">可用：￥{{balance.accountAvailableBalance}}</view>
					<view class="rest">余额：￥{{balance.accountBlance}}</view>
				</view>
				<view class="item" @tap="goto('/pages/bondDetail/index')">
					<view class="title">
						<image class="icon" src="/static/images/home/bond.png"></image>
						保证金账户
					</view>
					<view class="available">可用：￥{{balance.insureAccountavailableBalance}}</view>
					<view class="rest">余额：￥{{balance.insureAccountBalance}}</view>
				</view>
				<image class="background" src="/static/images/home/background.png"></image>
			</view>
			<!-- <view class="notice">
				<view class="left">
					<image src="/static/images/home/notice.png" class="icon"></image>
					<view class="status">未读</view>
					<view class="text">当前有一个未签合同</view>
				</view>
				<view class="action" @tap="developingTip">
					更多
					<image src="/static/images/home/more.png" class="icon"></image>
				</view>
			</view> -->
		</view>
		<!-- <view class="card" v-if="modules.contract_manage">
			<view class="card_head">
				<image src="/static/images/home/stock.png" class="icon"></image>
				库存管理
				<view class="action" @tap="goto('/pages/stockList/index')">
					更多
					<image src="/static/images/home/more.png" class="icon"></image>
				</view>
			</view>
			<view class="card_body">
				<view class="list">
					<view class="thead stock">
						<view class="th code">合同编号</view>
						<view class="th">合同数量</view>
						<view class="th">已发货数量</view>
						<view class="th">未发货数量</view>
					</view>
					<view class="tbody stock">
						<view class="row" v-for="item in stockList" :key="item.contact">
							<view class="td code">{{item.contractCode}}</view>
							<view class="td">{{item.orderQty}}</view>
							<view class="td">{{item.saleQty}}</view>
							<view class="td">{{item.noDeliverQty}}</view>
						</view>
						<view class="empty" v-if="stockList.length === 0">暂无数据</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="card" v-if="modules.contract_manage">
			<view class="card_head">
				<image src="/static/images/home/contract.png" class="icon"></image>
				合同数据
				<view class="action" @tap="goto('/pages/contractList/index')">
					更多
					<image src="/static/images/home/more.png" class="icon"></image>
				</view>
			</view>
			<view class="card_body">
				<view class="list">
					<view class="thead">
						<view class="th code">合同编号</view>
						<view class="th status">执行状态</view>
						<view class="th">签约时间</view>
					</view>
					<view class="tbody">
						<view class="row" v-for="item in contractList" :key="item.contactCode">
							<view class="td code">{{item.contactCode}}</view>
							<view class="td status">{{item.contractStatus}}</view>
							<view class="td">{{item.signTime}}</view>
						</view>
						<view class="empty" v-if="contractList.length === 0">暂无数据</view>
					</view>
				</view>
			</view>
<!-- 			<xuanze @itemObj='itemObj' :text="'注册流程一览图'" :data="arr" :bgflag='flag' @flagB='f1()'></xuanze>
			<button @click="flag=!flag">显示</button>
 -->			<!-- <view class="column code">
					合同编号
					<view class="row" v-for="(item, index) in contractList" :key="index">
					{{item.contactCode}}
					</view>
				</view>
				<view class="column">
					执行状态
					<view class="row" v-for="item in contractList" :key="item.contactCode">
					{{item.contractStatus}}
					</view>
					<view>暂无数据</view>
				</view>
				<view class="column">
					签约时间
					<view class="row" v-for="item in contractList" :key="item.contactCode">
					{{item.signTime}}
					</view>
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="item" @tap="goto('/pages/contractList/index')">
				<image class="icon" src="/static/images/home/contract_query.png">
					合同查询
				</image>
			</view>
			<view class="item" @tap="goto('/pages/stockList/index')">
				<image class="icon" src="/static/images/home/stock_query.png">
					库存查询
				</image>
			</view>
			<view class="item" @tap="goto('/pages/PickGoodsManager/index')">
				<!--之前是这个 显示正在开发中 //developingTip() -->
				<image class="icon" src="/static/images/home/pick_manage.png">
					提货管理
				</image>
			</view>
			<view class="item" @tap="goto('/pages/fundDetail/index')">
				<image class="icon" src="/static/images/home/fund_manage.png">
					资金账户管理
				</image>
			</view>
			<view class="item" @tap="goto('/pages/unitPersonnelManage/index')">
				<image class="icon" src="/static/images/home/uni_person_manage.png">
					本单位人员管理
				</image>
			</view>
			<view class="item" @tap="goto('/pages/web-view/index', {url: 'https://request.zxlscm.com/qa/index.html'})">
				<image class="icon" src="/static/images/home/common_quetion.png">
					常见问题
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import func from '../../utils/func.js'
	import xuanze from "../../components/Feng-List/xuanze.vue"

	export default {
		components: {
			xuanze
		},
		data() {
			let roleType = uni.getStorageSync('roleType')
			let modules = {}
			if (roleType === '0') { // 供应商
				modules = {
					contract_manage: true
				}
			}
			if (roleType === '1') { // 客户
				modules = {
					fund: true,
					contract_manage: true
				}
			}
			return {
				departName: '-',
				userName: '-',
				roleName: '-',
				companyCertification: 0,
				userPhone: '-',
				modules: modules,
				userCertifyStatus: '-',
				companyCertifyStatus: '-',

				balance: {
					accountAvailableBalance: '-',
					accountBlance: '-',
					insureAccountBalance: '-',
					insureAccountavailableBalance: '-',
					userCertification: '-'
				},
				contractList: [],
				stockList: [],
				certifyMessageUrl: 'https://request.zxlscm.com/qyssdk/index.html', ////'http://wms.zxlscm.com:18889/qyssdk/index.html', //
				peopleCertifyHtml: 'https://request.zxlscm.com/qyssdk/people.html', //http://wms.zxlscm.com:18889
				tempParms: '',
				peopleTempParms: '',
				arr: [{
						logo: "/static/images/home/user_vip.png",
						banknum: '',
						bankusername: '',
						title: '个人认证'
					},
					{
						logo: '/static/images/home/user_vip.png',
						banknum: '',
						bankusername: '',
						title: '注册/加入企业'
					},
					{
						logo: '/static/images/home/user_vip.png',
						banknum: '',
						bankusername: '',
						title: '企业认证'
					},
					{
						logo: '/static/images/home/user_vip.png',
						banknum: '',
						bankusername: '',
						title: '注册完成'
					}
				],
				flag: false
			}
		},
		computed: {
			authState() {
				let state = ['未认证', '已认证', '认证中', '认证失败']
				return state[this.companyCertification]
			}
		},
		onLoad() {
			this.$store.state.loggedIn
				.then(res => {
					this.getBalance()
					this.getStockList()
					this.getContractList()
					this.getCertifyMessage()
					this.getPeopleCertifyMessage()
				})
		},
		onShow() {
			this.$store.state.loggedIn
				.then(res => {
					var that = this
					uni.$on('update', function(data) {
						that.getBalance()
						that.getStockList()
						that.getContractList()
						that.getCertifyMessage()
						this.getPeopleCertifyMessage()

					})
				})
				.catch(res => {
					if (res.state === 0 || res.state === 1) {
						uni.redirectTo({
							url: '/pages/login/index'
						})
					}
				})
		},

		methods: {
			itemObj(e){
				console.log(e)
			},
			f1(){
				this.flag=!this.flag
			},
			getCertifyArgs() {
				return this.http.GET({
					name: 'qysauthparams'
				})
			},
			getCertifyUrl() {
				return this.http.GET({
					name: 'certifyMessage',
				})
			},
			async getCertifyMessage() {
				let url = await this.getCertifyUrl()
				url = url && url.data
				if (typeof url === 'string') {
					url = url.replace(/\?/g, '####')
					url = url.replace(/=/g, '@@@@')
					url = url.replace(/&/g, '✈✈✈✈')
				}
				let params = await this.getCertifyArgs()
				params = params && params.data
				if (typeof params.callBackUrl === 'string') {
					params.callBackUrl = params.callBackUrl.replace(/\?/g, '####')
					params.callBackUrl = params.callBackUrl.replace(/=/g, '@@@@')
					params.callBackUrl = params.callBackUrl.replace(/&/g, '✈✈✈✈')
				}
				params.applicantName = encodeURI(params.applicantName)
				params.companyName = encodeURI(params.companyName)
				let temp = func.objConvertUrl('', {
					certifyUrl: url,
					...params
				})
				this.certifyMessageUrl = this.certifyMessageUrl + '?' + temp
				this.tempParms = '?' + temp
				console.log('xxxx:' + temp)
			},
			// 个人认证

			getPeopleCertifyArgs() {
				return this.http.GET({
					name: 'peopleauthparams'
				})
			},
			async getPeopleCertifyMessage() {

				let params = await this.getPeopleCertifyArgs()
				params = params && params.data
				if (typeof params.callBackUrl === 'string') {
					params.callBackUrl = params.callBackUrl.replace(/\?/g, '####')
					params.callBackUrl = params.callBackUrl.replace(/=/g, '@@@@')
					params.callBackUrl = params.callBackUrl.replace(/&/g, '✈✈✈✈')
				}
				params.mode = encodeURI(params.mode)
				params.contact = encodeURI(params.contact)
				params.username = encodeURI(params.username)
				params.callbackUrl = encodeURI(params.callbackUrl)
				console.log('contact' + params.contact)

				let temp = func.objConvertUrl('', {
					certifyUrl: this.peopleCertifyHtml,
					...params
				})
				this.peopleCertifyHtml = this.peopleCertifyHtml + '?' + temp

				console.log('11xxxx:' + temp)
			},


			getBalance() {
				this.http.POST({
						name: 'blance'
					})
					.then(res => {
						if (res.result === 'success') {
							this.balance = res.data
							this.departName = res.data.companyName
							this.userName = res.data.userName
							this.roleName = res.data.roleName
							this.companyCertification = res.data.companyCertification
							this.userPhone = res.data.userPhone
							console.log('balance=' + this.balance.userCertification)
						}
					})
			},
			getStockList() {
				this.http.GET({
						name: 'stocklist',
						params: {
							pageIndex: 1,
							pageSize: 5
						}
					})
					.then(res => {
						if (res.result === 'success') {
							this.stockList = res.data.datas
						}
					})
			},
			getContractList() {
				this.http.GET({
						name: 'contractlist',
						params: {
							pageIndex: 1,
							pageSize: 3
						}
					})
					.then(res => {
						if (res.result === 'success') {
							this.contractList = res.data.datas
						}
					})
			},
			navigateProxy(id) {
				if (id === 'unit_person_manage') {

				} else {
					this.developingTip()
				}
			},
			userClick() {
				uni.navigateTo({
					url: '/pages/personalCenter/index'
				})
				console.log('这里被电击了xx')
			},
			peopleCertifyClick() {
				var that = this
				var webviewURL = that.peopleCertifyHtml
				var resultURL = encodeURIComponent(JSON.stringify(webviewURL))
				console.log('peopleCertifyHtmlresultURL=' + resultURL)
				console.log('peopleCertifyHtml=' + that.peopleCertifyHtml)

				uni.request({
					url: 'https://request.zxlscm.com/zxlmp/web/peopleauthstatus', //https://request.zxlscm.com/zxlmp/web http://dev.api.daruiyun.com:18889/zxlmp/api
					header: {
						'sysName': 'zxlmp',
						'clientId': 'client.wx.microapp',
						'instanceId': 'zxl',
						'Content-Type': 'application/x-www-form-urlencoded',
						'Cookie': 'SESSION=' + uni.getStorageSync('sessionId'),
					},
					success: function(res) {
						console.log('people=' + res.data.data.status)
						if (res.data.result === 'success') {
							// this.userCertifyStatus=res.data.data.url							
							if (res.data.data.status === 1) {
								console.log('aa111=' + resultURL)
								uni.navigateTo({
									url: '/pages/personalCenter/index'
								})
							} else {
								uni.navigateTo({
									url: '/pages/zhb_web/zhb_web?url=' + resultURL
								})
							}
							console.log('peoplecc=' + resultURL)

						} else {
							console.log('errmsg=' + res.errMsg)
							uni.navigateTo({})
						}
						console.log('result=' + res.data.result)
						console.log('data=' + res.data.data)

					},
					fail: function() {
						console.log('ddddd=' + errMsg)

					}
				})

			},
			getCertifyStatus() {
				var that = this
				var webviewURL = that.certifyMessageUrl
				var resultURL = encodeURIComponent(JSON.stringify(webviewURL))
				console.log('resultURL=' + resultURL)
				console.log('certifyMessageUrl=' + that.certifyMessageUrl)

				uni.request({
					url: 'https://request.zxlscm.com/zxlmp/web/companyauthstatus', //https://request.zxlscm.com/zxlmp/web
					header: {
						'sysName': 'zxlmp',
						'clientId': 'client.wx.microapp',
						'instanceId': 'zxl',
						'Content-Type': 'application/x-www-form-urlencoded',
						'Cookie': 'SESSION=' + uni.getStorageSync('sessionId'),
					},
					success: function(res) {
						console.log('ff=' + webviewURL)
						if (res.data.result === 'success') {
							// this.companyCertifyStatus=res.data.data.url
							// console.log('companyCertifyStatus=' + this.companyCertifyStatus)

							if (res.data.data.status === 0) {
								console.log('aa=' + webviewURL)
								uni.navigateTo({
									url: '/pages/zhb_web/zhb_web?url=' + resultURL
								})
							} else {
								uni.navigateTo({})
							}
							console.log('cc=' + webviewURL)

						} else {
							console.log('errmsg=' + res.errMsg)
							uni.navigateTo({})
						}
						console.log('result=' + res.data.result)
						console.log('data=' + res.data.data)

					},
					fail: function() {
						console.log('ddddd=' + errMsg)

					}
				})
			},
		},
	}
</script>

<style>
	.home {
		padding-bottom: 310upx;
	}

	.home .navigationBar {
		border-top: 1upx solid #DDDDDD;
		padding: 0upx 40upx;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.navigationBar .department {
		padding: 30upx 0upx;
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
	}

	.department .name {
		font-size: 32upx;
		max-width: 460upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}

	.department .vip {
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;
	}

	.department .auth {
		color: #666666;
		font-size: 30upx;
		display: inline-block;
		position: absolute;
		right: 0upx;
	}

	.department .auth .right {
		width: 11upx;
		height: 20upx;
		margin-left: 10upx;
	}

	.navigationBar .userinfo {
		padding-bottom: 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width: 100%;
	}

	.userinfo .user_icon {
		width: 100upx;
		height: 100upx;
	}

	.userinfo .user_vip {
		width: 30upx;
		height: 30upx;
		position: absolute;
		bottom: 30rpx;
		left: 66rpx;
	}

	.userinfo .info {
		padding: 10upx 20upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.userinfo .info .basic {
		color: #666666;
		font-size: 30upx;
	}

	.userinfo .info .roles {
		color: #666666;
		font-size: 28upx;
	}

	.userinfo .edit {
		position: absolute;
		right: 20upx;
		top: 20upx;
		width: 28upx;
		height: 28upx;
	}

	.home .head {
		padding: 0upx 20upx;
		background-color: #FFFFFF;
	}

	.head .capital {
		position: relative;
		display: flex;
		height: 247upx;
	}

	.head .capital .background {
		position: absolute;
		top: 0upx;
		left: 0upx;
		width: 710upx;
		height: 100%;
	}

	.head .capital .item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 1;
		padding: 40upx 0upx;
	}

	.head .capital .item .title {
		font-size: 36upx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 18upx;
	}

	.head .capital .item .title .icon {
		width: 40upx;
		height: 40upx;
		margin-right: 3upx;
	}

	.head .capital .item .available,
	.head .capital .item .rest {
		font-size: 30upx;
		color: #FFFFFF;
		margin-bottom: 14upx;
	}

	.head .notice {
		padding: 12upx 0upx;
		padding-left: 21upx;
		padding-right: 16upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head .notice .left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.head .notice .left .icon {
		width: 26upx;
		height: 26upx;
		margin-right: 13upx;
	}

	.head .notice .left .status {
		color: #FF9E00;
		background-color: rgba(255, 175, 0, 0.16);
		border: 1upx solid #FF9E00;
		border-radius: 2upx;
		font-size: 20upx;
		padding: 1upx 6upx;
		margin-right: 12upx;
	}

	.head .notice .left .text {
		color: #666666;
		font-size: 26upx;
		width: 307upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.head .notice .action {
		color: #666666;
		font-size: 28upx;
	}

	.head .notice .action .icon {
		width: 11upx;
		height: 20upx;
		margin-left: 8upx;
	}

	.home .card {
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx;
		margin-bottom: 0upx;
	}

	.card .card_head {
		font-weight: bold;
		font-size: 32upx;
		position: relative;
		padding: 15upx;
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #DDDDDD;
	}

	.card .card_head .icon {
		width: 34upx;
		height: 34upx;
		margin-right: 6upx;
	}

	.card .card_head .action {
		position: absolute;
		right: 15upx;
		color: #666666;
		font-size: 28upx;
		top: 15upx;
	}

	.card .card_head .action .icon {
		width: 11upx;
		height: 20upx;
		margin-left: 8upx;
	}

	.card .card_body {
		display: flex;
		justify-content: flex-start;
	}

	.card_body .list {
		width: 100%;
	}

	.list .thead {
		border-bottom: 1upx solid #DDDDDD;
		width: 100%;
	}

	.list .thead .th {
		display: inline-block;
		width: 25%;
		font-size: 30upx;
		text-align: center;
		padding: 13upx 3upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list .stock .th {
		width: 22%;
	}

	.list .thead .th.code {
		width: 55%;
	}

	.list .stock .th.code {
		width: 31%;
	}

	.list .thead .th.status {
		width: 20%;
	}

	.list .tbody {
		width: 100%;
	}

	.list .tbody .row {
		width: 100%;
	}

	.list .tbody .row .td {
		display: inline-block;
		font-size: 30upx;
		width: 25%;
		padding: 13upx 3upx;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list .stock .row .td {
		width: 22%;
	}

	.list .tbody .row .td.code {
		width: 55%;
	}

	.list .stock .row .td.code {
		width: 31%;
	}

	.list .tbody .row .td.status {
		width: 20%;
	}

	.empty {
		text-align: center;
		color: #999999;
		font-size: 25upx;
		padding: 10upx;
	}

	/* .card .card_body .column {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		padding: 13upx 37upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.card .card_body .column.code {
		flex: 2;
	}
	.card .card_body .row {
		font-size: 28upx;
		color: #666666;
		padding-top: 12upx;
	} */

	.home .bottom {
		/* margin-top: 20upx; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		position: fixed;
		bottom: 0upx;
	}

	.bottom .item {
		padding: 26upx 0upx;
		width: 33.3%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 28upx;
	}

	.bottom .item .icon {
		width: 60upx;
		height: 60upx;
	}
</style>
